<template>
  <div class="recruitment-container">
    <h2>人才招聘</h2>
    <div class="recruitment-content">
      <div class="section">
        <h3>招聘理念</h3>
        <p>中空领航坚持"唯才是举、德才兼备"的用人原则，致力于吸引和培养各类优秀人才，为员工提供广阔的发展空间和良好的职业发展机会。我们欢迎具有创新精神、团队合作意识和专业能力的人才加入中空领航大家庭，共同创造美好未来。</p>
      </div>
      
      <div class="section">
        <h3>福利待遇</h3>
        <div class="benefits-grid">
          <div class="benefit-item">
            <i class="el-icon-s-finance"></i>
            <span>具有竞争力的薪酬</span>
          </div>
          <div class="benefit-item">
            <i class="el-icon-s-goods"></i>
            <span>完善的福利保障</span>
          </div>
          <div class="benefit-item">
            <i class="el-icon-s-opportunity"></i>
            <span>丰富的培训机会</span>
          </div>
          <div class="benefit-item">
            <i class="el-icon-s-promotion"></i>
            <span>广阔的晋升空间</span>
          </div>
          <div class="benefit-item">
            <i class="el-icon-s-home"></i>
            <span>舒适的工作环境</span>
          </div>
          <div class="benefit-item">
            <i class="el-icon-s-flag"></i>
            <span>丰富的团队活动</span>
          </div>
        </div>
      </div>
      
      <div class="section jobs-section">
        <h3>招聘职位</h3>
        <div class="job-filter">
          <el-select v-model="jobType" placeholder="职位类别">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="研发/技术" value="研发/技术"></el-option>
            <el-option label="产品/设计" value="产品/设计"></el-option>
            <el-option label="运营/市场" value="运营/市场"></el-option>
            <el-option label="行政/人事" value="行政/人事"></el-option>
          </el-select>
          
          <el-select v-model="jobLocation" placeholder="工作地点">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="深圳" value="深圳"></el-option>
            <el-option label="北京" value="北京"></el-option>
            <el-option label="上海" value="上海"></el-option>
            <el-option label="广州" value="广州"></el-option>
          </el-select>
        </div>
        
        <div class="job-list">
          <div class="job-item" v-for="(job, index) in filteredJobs" :key="index">
            <div class="job-header">
              <h4>{{ job.title }}</h4>
              <div class="job-meta">
                <span><i class="el-icon-location"></i> {{ job.location }}</span>
                <span><i class="el-icon-user"></i> {{ job.type }}</span>
                <span><i class="el-icon-date"></i> {{ job.date }}</span>
              </div>
            </div>
            <div class="job-body">
              <h5>岗位职责：</h5>
              <ul>
                <li v-for="(duty, idx) in job.responsibilities" :key="'duty'+idx">{{ duty }}</li>
              </ul>
              <h5>任职要求：</h5>
              <ul>
                <li v-for="(req, idx) in job.requirements" :key="'req'+idx">{{ req }}</li>
              </ul>
            </div>
            <div class="job-footer">
              <el-button type="primary" size="small">申请职位</el-button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="section">
        <h3>简历投递</h3>
        <p>欢迎您将个人简历发送至我们的招聘邮箱：<strong>hr@zhongkong.com</strong>，请在邮件主题中注明应聘职位。我们会认真审阅每一份简历，并在合适的时候与您联系。</p>
        <p>招聘热线：400-888-XXXX</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Recruitment',
  data() {
    return {
      jobType: '全部',
      jobLocation: '全部',
      jobs: [
        {
          title: '高级前端工程师',
          type: '研发/技术',
          location: '深圳',
          date: '2023-06-01',
          responsibilities: [
            '负责公司核心产品的前端开发工作',
            '参与产品需求讨论，提供技术解决方案',
            '优化前端架构，提升用户体验和页面性能',
            '指导初级工程师，进行代码审核和技术分享'
          ],
          requirements: [
            '本科及以上学历，计算机相关专业，3年以上前端开发经验',
            '精通HTML、CSS、JavaScript，熟悉Vue/React等主流前端框架',
            '了解前端工程化，有大型项目开发经验',
            '具备良好的沟通能力和团队合作精神'
          ]
        },
        {
          title: '数据分析师',
          type: '研发/技术',
          location: '北京',
          date: '2023-06-05',
          responsibilities: [
            '负责公司业务数据的分析和挖掘工作',
            '构建数据分析模型，提供数据洞察和决策支持',
            '编写数据分析报告，为业务部门提供数据支持',
            '参与数据产品的需求分析和功能设计'
          ],
          requirements: [
            '硕士及以上学历，统计学、数学或计算机相关专业',
            '熟练掌握SQL、Python或R等数据分析工具',
            '具备良好的数据敏感性和分析能力',
            '良好的沟通表达能力和团队协作能力'
          ]
        },
        {
          title: '产品经理',
          type: '产品/设计',
          location: '深圳',
          date: '2023-06-10',
          responsibilities: [
            '负责公司核心产品的规划和设计',
            '进行市场调研和竞品分析，制定产品策略',
            '撰写产品需求文档，协调研发团队实现产品功能',
            '跟踪产品运营数据，持续优化产品体验'
          ],
          requirements: [
            '本科及以上学历，2年以上互联网产品经理经验',
            '具备良好的产品思维和用户体验意识',
            '熟悉产品开发流程，有较强的项目管理能力',
            '良好的沟通协调能力和团队合作精神'
          ]
        }
      ]
    }
  },
  computed: {
    filteredJobs() {
      return this.jobs.filter(job => {
        let typeMatch = this.jobType === '全部' || job.type === this.jobType;
        let locationMatch = this.jobLocation === '全部' || job.location === this.jobLocation;
        return typeMatch && locationMatch;
      });
    }
  }
}
</script>

<style scoped>
.recruitment-container {
  padding: 20px 0;
}

.recruitment-container h2 {
  font-size: 28px;
  color: #333;
  border-bottom: 2px solid #0066cc;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

.section {
  margin-bottom: 40px;
}

.section h3 {
  font-size: 22px;
  color: #0066cc;
  margin-bottom: 15px;
}

.section p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 15px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.benefit-item {
  background: #f5f9ff;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.benefit-item i {
  font-size: 40px;
  color: #0066cc;
  margin-bottom: 10px;
}

.benefit-item span {
  font-size: 16px;
  color: #333;
}

.job-filter {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.job-list {
  margin-top: 20px;
}

.job-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.job-header {
  background: #f5f9ff;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.job-header h4 {
  font-size: 18px;
  color: #333;
  margin: 0 0 10px;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.job-meta span {
  font-size: 14px;
  color: #666;
}

.job-meta i {
  margin-right: 5px;
}

.job-body {
  padding: 20px;
}

.job-body h5 {
  font-size: 16px;
  color: #0066cc;
  margin: 15px 0 10px;
}

.job-body ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 15px;
}

.job-body li {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 5px;
}

.job-footer {
  padding: 0 20px 20px;
  text-align: right;
}

@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .job-filter {
    flex-direction: column;
  }
}
</style> 